<template>
  <div class="app-cont">
    <div class="main">
      <div class="header">
        <div class="headerIn">
          <img src="../assets/ZDD.png" width="100%" height="auto">
        </div>
        <div class="number">
          <ul class="numberL">
            <li class="black">物流状态</li>
            <li>承运来源</li>
            <li>运单编号</li>
          </ul>
          <ul class="numberR">
            <li class="green">
              {{states[list.State]}}
            </li>
            <li>{{ carriers[list.ShipperCode]}}</li>
            <li>{{list.LogisticCode}}</li>
          </ul>
        </div>
      </div>

      <div class="content">
        <h3>物流跟踪</h3>
        <div class="contentR">
          <ul>

            <li v-for="wuli in reverse" >
              <p>{{wuli.AcceptStation}}</p>
              <p>{{wuli.AcceptTime}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import {
    wxHttpTool,
    wx_config,
    http_getParam,
    get_shopQrcoe,
    wx_share,
    wx_hideAllMenu
  } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'

  export default {
    name: 'logistics',
    data() {
      return {
        list:{},
        reverse:{},
       states:{2:'在途中',3:'已签收', 4:'问题件'},
        carriers:{YTO:"圆通快递",YD:"韵达快递",ZTO:"中通快递",EMS:"EMS",DBL:"德邦",QFKD:"全峰快递",YZPY:"邮政包裹",JD:"京东物流"}
      }
    },
    methods: {},
    created() {
      const jsonValue = JSON.stringify({
        "c": "10057",
        "p": {
          "userId": JSON.parse(window.localStorage.data).id, //用户ID
          "startIndex": 0, // 开始位置
          "pageSize": 10, // 分页总数量
          "tokenId":token(),
           "orderId":window.localStorage.orderId
        }
      });
      this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
        this.list = JSON.parse(res.data.p.result);
        console.log(this.list);
        this.reverse = this.list.Traces.reverse()
        console.log(res)
      })
    }
  }
</script>

<style lang="scss" scoped>
  /* CSS Document */
  * {
    margin: 0px;
    padding: 0px;
    font-family: "宋体";
    font-family: "微软雅黑";
    color: #626262;
    font-size: 14px;
  }
  a {
    text-decoration: none;
    overflow: hidden;
  }

  img {
    border: 0px;
  }

  ul, li {
    list-style: none;
  }

  dl, dt, dd {
    display: block;
    margin: 0;
  }

  .main {
    width: 97%;
    height: auto;
    background: #EEEEEE;
    line-height: 1.5em;
  }

  /****************top****************/
  .top {
    background: #E53C3A;
    height: 80px;
  }

  .top span a, .top h1 {
    float: left;
    width: 40%;
    display: block;
    line-height: 80px;
    color: #FFF;
  }

  .top span a {
    font-size: 1.2em;
  }

  .top h1 {
    font-size: 1.5em;
    font-weight: normal;
  }

  .header {
    background: #fff;
    overflow: hidden;
    text-indent: 3em;
    margin-bottom: 2%;
    padding: 2% 0 0 2%;
  }

  .header .headerIn {
    float: left;
  }

  .header .headerIn {
    width: 17%;
  }

  .header .headerIn img {
    display: block;
  }

  /*.header .headerIn img{width:100%;height:auto;}
  */
  .header .number {
    width: 83%;
    float: right;
  }

  .number h2 {
    font-size: 1.1em;
    font-weight: normal;
  }

  .number span {
    color: #900;
    font-weight: normal;
  }

  .number .black {
    color: #000;
  }

  .green {
    color: #0C0;
  }

  .blue {
    color: #4592F9;
  }

  /*.number ul{width:100%;color:#909090;height:27px;}
  */
  .number .numberL {
    float: left;
    font-size: 1.1rem;
    width: 40%;
  }

  .number .numberR {
    float: left;
    width: 49%;
    text-align: left;
    font-size: 1.1rem;
  }

  /*shop*/
  .shop {
    background: #fff;
    margin: 0 0 2% 0;
    width: 100%;
  }

  .shop h2 {
    font-size: 1.2em;
    font-weight: normal;
    width: 96%;
    border-bottom: 1px solid #E3E3E3;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 3%;
  }

  .shopIn {
    padding: 2% 0 0 2%;
    background: #fff;
    overflow: hidden;
  }

  .shopIn .shopL {
    float: left;
    width: 17%;
  }

  .shopIn .shopR {
    float: right;
    width: 75%;
  }

  .shopIn .shopR h3 {
    color: #000;
    font-size: 1.1em;
    line-height: 2.0em;
    font-weight: normal;
    height: auto;
  }

  .shopIn .shopR p {
    font-size: 1.0em;
  }

  .shopIn .shopR span {
    color: #F00;
  }

  /**************content**********/
  .content {
    width: 100%;
    backgroundP: #fff;
  }

  .content h3 {
    font-size: 1.2em;
    border-bottom: 1px solid #E3E3E3;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
  }

  .contentR {
    background: #fff;
    overflow: hidden;
    padding: 2% 0 0 5%;
  }

  .contentR {
    width: 97%;
    line-height: 1.5em;
    margin-bottom: 5%;
  }

  .contentR li p, .contentR li span {
    font-size: 0.9em;
    display: block;
    line-height: 2em;
    margin-left: 1em;
  }

  .contentR li {
    border-bottom: 1px solid #F7F7F7;
    border-left: 1px solid #CCC;
    position: relative;
  }

  .contentR li:before {
    content: '';
    border: 3px solid #f3f3f3;
    background-color: #d9d9d9;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    margin-left: -6px;
    position: absolute;
    left: 0;
    top: 40%;
  }

  .contentR .last:before {
    content: '';
    border: 3px solid #f3f3f3;
    background-color: #d9d9d9;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    margin-left: -6px;
    background-color: #4ECC80;
    border-color: #C5EED6;
  }

  .contentR .last p, .contentR .last span {
    display: block;
    color: #4ECC80;
  }
</style>
